<template>
  <div style="">
    <div>
      <el-form :model="form" inline>
        <el-form-item>
          <el-input v-model="form.printCode" placeholder="" style="width: 630px; " @keydown="changeInputSubmit"
            :disabled='oror' clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableContents" style="margin-top: 100px; position: relative;">
      <div>
        <el-image style="width: 250px; height: 250px" :src="contentOrder.orderPicPath" fit="fill" />
      </div>
      <div class='contentSKU'>
        <p><span style="color:red">订单号：</span><span>{{ contentOrder.orderOid }}</span></p>
        <p><span>SKU信息:{{ contentOrder.orderSkuPropertiesName }}</span></p>
        <p><span>淘宝订单归属公司:{{ contentOrder.company }}</span> <span style="margin-left: 200px;">发货运单号:{{
          contentOrder.orderInvoiceNo }}</span></p>
        <el-button type="primary" @click="NoQualityTesting(contents)" style="margin-left: 200px;">重新打快递面单</el-button>
        <!-- <el-button type="primary" @click="onSubmit" style="margin: 49px; ">确认打包并打印快递面单</el-button>
      <el-button type="danger" @click="onSubmit">原路返回</el-button> -->
      </div>
      <div class="contentSKU">
        <p><span>淘宝订单状态：</span><span>{{ contentOrder.orderStatus }}</span></p>
        <p><span>数量：{{ contentOrder.orderNum }}件</span></p>

      </div>
      <div v-if="dialogVisible"
        style="position: absolute;top: 80px;left: 300px;width: 300px;background-color: #fff;display: flex;flex-direction:column ;align-items: center;">
        <p>
          <strong>该订单数量大于1</strong>
        </p>
        <el-button type="primary" @click="printSubmit">确定</el-button>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { warehousePrintprovideScan, warehousePrintprovideScanOut } from '@/api/index'
import { ElMessage } from 'element-plus'
import { useAlertsStore } from '@/store/index'
const store = useAlertsStore()
const form = ref({})
const contentOrder = ref({})
const dialogVisible = ref(false)
const idsSuc = ref('')
const onSubmit = () => {
  // oror.value = true
  warehousePrintprovideScan({
    name: form.value.printCode
  }).then(res => {
    const { data: { data } } = res
    console.log(data)
    contentOrder.value = data
    idsSuc.value = data.sourceId
    if (data.orderNum > 1) {
      dialogVisible.value = true
    } else {
      if (localStorage.getItem('PrinterSetList')) {
        // const times = a
        // console.log(times + '好的')
        localStorage.setItem('danziPrintContent', data.printData)
        const lists = JSON.parse(localStorage.getItem('PrinterSetList'))
        const val = { cmd: 'print', requestID: '123458976', version: '1.0', task: { taskID: (new Date().getTime() + ''), preview: false, printer: lists[0].PrinterList, notifyMode: 'allInOne', previewType: 'pdf', documents: [{ documentID: '0123456789', contents: [JSON.parse(data.printData)] }] } }
        console.log(val)
        store.socket.send(JSON.stringify(val))
        form.value.printCode = ''
        // const lists = JSON.parse(localStorage.getItem('PrinterSetList'))
        // const val = { cmd: 'print', requestID: '123458976', version: '1.0', task: { taskID: (+new Date() + times), preview: false, printer: lists[0].PrinterList, notifyMode: 'allInOne', previewType: 'pdf', documents: [{ documentID: '0123456789', contents: [JSON.parse(data[0])] }] } }
        // console.log(JSON.stringify(val))
        // store.socket.send(JSON.stringify(val))

        warehousePrintprovideScanOut({ id: contentOrder.value.id, sourceId: data.sourceId }).then(res => {
          ElMessage.success('操作成功')
        })
        // oror.value = false
      } else {
        ElMessage.error('先设置打印机')
      }
    }
  })
}
const printSubmit = () => {
  warehousePrintprovideScanOut({ id: contentOrder.value.id, sourceId: idsSuc.value }).then(res => {
    ElMessage.success('操作成功')
    dialogVisible.value = false
    const { data: { data } } = res
    if (localStorage.getItem('PrinterSetList')) {
      localStorage.setItem('danziPrintContent', data)
      // const times = a
      // console.log(times + '好的')
      const lists = JSON.parse(localStorage.getItem('PrinterSetList'))
      const val = { cmd: 'print', requestID: '123458976', version: '1.0', task: { taskID: (new Date().getTime() + ''), preview: false, printer: lists[0].PrinterList, notifyMode: 'allInOne', previewType: 'pdf', documents: [{ documentID: '0123456789', contents: [JSON.parse(data)] }] } }
      console.log(val)
      store.socket.send(JSON.stringify(val))
      // oror.value = false
    } else {
      ElMessage.error('先设置打印机')
    }
  })
}
// 销毁
onBeforeUnmount(() => {
  console.log('销毁')
  store.destroyed()
})
const doConnect = () => {
  console.log('d打开了不')
  store.socket = new WebSocket('ws://localhost:13528')
  // 打开Socket
  store.socket.onopen = function (event) {
    console.log('连接了')
    // 监听消息
    store.socket.onmessage = function (event) {
      console.log('接受了信息')
      // localStorage.setItem('printerproperties', event.data)
    }
    // 监听Socket的关闭
    store.socket.onclose = function (event) {
      // console.log('Client notified socket has closed', event)
    }
  }
}
onMounted(() => {
  doConnect()
})
const NoQualityTesting = () => {
  if (localStorage.getItem('PrinterSetList')) {
    // const times = a
    // console.log(times + '好的')
    const lists = JSON.parse(localStorage.getItem('PrinterSetList'))
    const val = { cmd: 'print', requestID: '123458976', version: '1.0', task: { taskID: (new Date().getTime() + ''), preview: false, printer: lists[0].PrinterList, notifyMode: 'allInOne', previewType: 'pdf', documents: [{ documentID: '0123456789', contents: [JSON.parse(localStorage.getItem('danziPrintContent'))] }] } }
    console.log(val)
    store.socket.send(JSON.stringify(val))
  } else {
    ElMessage.error('先设置打印机')
  }
}
const timesOt = ref(null)
const changeInputSubmit = () => {
  console.log(timesOt.value)
  if (timesOt.value) {
    clearTimeout(timesOt.value)
  }
  timesOt.value = setTimeout(() => {
    onSubmit()
    console.log('1231231231')
  }, 500)
}
const oror = ref(false)
</script>

<style lang='less' scoped>
.tableContents {
  display: flex
}

.contentSKU {
  margin-left: 30px
}

.contentSKU p {
  line-height: 35px
}
</style>
